﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/echarts-gl.js"></script>
    <script src="js/simplex-noise.js"></script>

    <script type="text/javascript">
        function generateData() {
            var data = [];
            var noise = new SimplexNoise(Math.random);
            for (var i = 0; i <= 10; i++) {
                for (var j = 0; j <= 10; j++) {
                    var value = noise.noise2D(i / 5, j / 5);
                    data.push([i, j, value * 2 + 4]);
                }
            }
            return data;
        }

        $(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            var series = [];
            for (var i = 0; i < 10; i++) {
                series.push({
                    type: 'bar3D',
                    data: generateData(),
                    stack: 'stack',
                    shading: 'lambert',
                    emphasis: {
                        label: {
                            show: false
                        }
                    }
                });
            }

            option = {
                xAxis3D: {
                    type: 'value'
                },
                yAxis3D: {
                    type: 'value'
                },
                zAxis3D: {
                    type: 'value'
                },
                grid3D: {
                    viewControl: {
                        // autoRotate: true
                    },
                    light: {
                        main: {
                            shadow: true,
                            quality: 'ultra',
                            intensity: 1.5
                        }
                    }
                },
                series: series
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            myChart.on('click', function (params) {
                // 控制台打印数据的名称
                console.log(params);
                alert(params.value[0] + "," + params.value[1] + "," + params.value[2]);
            });

            myChart.on('mouseover', function (params) {
                // 控制台打印数据的名称
                console.log(params);
                //alert(params.value[0] + "," + params.value[1] + "," + params.value[2]);
            });
        });
    </script>

</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1200px;height:600px;"></div>
</body>
</html>
